<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
        <!-- <script>
               (function (doc, win) {var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){docEl.style.fontSize = '100px'; }else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);        </script> -->
        <style>
            .scroll{width: 100%; overflow: hidden; position: absolute;left: 0;width: 100%;}
            .scroll_con{height: 2.8rem; position: relative;}
            .scroll_con_item{width: 1.5rem;height: 1rem;position: absolute;top: 0;text-align: center;line-height: 1rem;} 
            .scroll_con_item img{position: absolute;width: 100%;left: 0;bottom: -1.2rem;}            
            .scroll_1{top: 1.6rem;}
            .scroll_2{top: 3.2rem;}
        </style>
    </head>
    <body>
        <section class="scroll scroll_1">
            <div class="scroll_con scroll_con_1">
                <div class="scroll_con_item bg7" data-val="128" style="left: -29px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
                <div class="scroll_con_item bg7" data-val="168" style="left: 59px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
                <div class="scroll_con_item bg7" data-val="228" style="left: 147px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
                <div class="scroll_con_item bg7" data-val="308" style="left: 236px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
                <div class="scroll_con_item bg7" data-val="128" style="left: 324px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
                <div class="scroll_con_item bg7" data-val="168" style="left: 412px;">
                    <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                </div>
            </div>
          </section>

          <section class="scroll scroll_2">
                <div class="scroll_con scroll_con_2">
                  <div class="scroll_con_item bgwen bkw" style="left: -4px;">
                        <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                  </div>
                  <div class="scroll_con_item bgwen bkw" style="left: 84px;">
                        <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                  </div>
                  <div class="scroll_con_item bgwen bkw" style="left: 172px;">
                        <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                  </div>
                  <div class="scroll_con_item bgwen bkw" style="left: 260px;">
                        <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                  </div>
                  <div class="scroll_con_item bgwen bkw" style="left: 349px;">
                        <img src="image/play/20fen.png" alt="" class="cont_section_item1 ">
                  </div>
                </div>
              </section>

      <script>
      

            // 滚动
            var scrollEle = function(ele,endP,speed){
                var num = $(ele).position().left;
                num --;
                $(ele).css('left',num);
                if(num  <= -$('.bkw').width()){
                    $(ele).css('left',endP);
                }
                setTimeout(function(){
                    scrollEle(ele,endP,speed);
                }, speed);
            }
            var scrollInt = function(){
                $('.scroll_con_1').children('.scroll_con_item').each(function(index, el) {
                    scrollEle(el,$('.bkw').width()*5,10);
                });
                $('.scroll_con_2 .scroll_con_item').each(function(index, el) {
                    scrollEle(el,$('.bkw').width()*4,10);
                });
            }

            // 位置初始化
            var scrollPosInt = function(){
                    // console.log(11)
                $('.scroll_con_1').children('.scroll_con_item').each(function(index, el) {
                    $(el).css('left',$('.bkw').width()*index);
                });
                $('.scroll_con_2 .scroll_con_item').each(function(index, el) {
                    $(el).css('left',$('.bkw').width()*index);
                });
            }
            $(document).ready(function(){

            
                    scrollInt();
                    scrollPosInt();
            
            
            });
      </script>
    </body>
</html>